<template>
  <view class="page">
    <image
      class="discern-pic"
      src="https://img1.baidu.com/it/u=2684101037,808780079&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
      mode="aspectFill"
    />
    <view class="info">
      <view class="info-title">你要识别的可能是：</view>
      <view class="info-name">布甲科</view>
      <view class="info-similarity">相似度45%</view>
      <view class="info-pics">
        <image
          v-for="(item, index) in 3"
          :key="index"
          class="info-pics-pic"
          src="https://img1.baidu.com/it/u=225041176,855892897&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422"
          mode="scaleToFill"
        />
      </view>
      <view class="info-detail">
        成虫体长1～60毫米，一般中等大小，色泽幽暗，多为黑色、褐色，常带
        金属光泽，少数色鲜艳，有黄色花斑；体表光洁或被疏毛，有不同形状的
        微细刻纹。
      </view>

      <view class="info-more">
        更多介绍
        <image
          class="info-more-icon"
          :src="require('@/static/img/more-icon.png')"
          mode="scaleToFill"
      /></view>
      <button @click="gotoBack" class="again-btn">
        <text>再来一次</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    gotoBack() {
      uni.navigateBack({ delta: 2 });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.discern-pic {
  width: 100%;
  height: 697rpx;
}
.info {
  flex: 1;
  width: 100%;
  background: #ffffff;
  border-radius: 28rpx 28rpx 0px 0px;
  opacity: 1;
  position: relative;
  top: -28rpx;
  padding: 42rpx 32rpx;
  &-title {
    font-size: 26rpx;
    font-weight: 500;
    color: #666666;
    margin-bottom: 21rpx;
  }
  &-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #202020;
  }
  &-similarity {
    font-size: 26rpx;
    font-weight: 500;
    color: #666666;
    margin-bottom: 28rpx;
  }
  &-pics {
    display: flex;
    margin-bottom: 23rpx;
    margin-bottom: 47rpx;
    &-pic {
      width: 182rpx;
      height: 182rpx;
      margin-right: 23rpx;
      border-radius: 18rpx;
    }
  }
  &-detail {
    font-size: 21rpx;
    color: #202020;
    line-height: 42rpx;
  }
  &-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    font-weight: bold;
    color: #202020;
    &-icon {
      width: 25rpx;
      height: 25rpx;
      margin-left: 18rpx;
    }
  }
}
.again-btn {
  width: 546rpx;
  height: 81rpx;
  border-radius: 53rpx;
  background: #1ac678;
  display: block;
  margin: 47rpx auto 0;
  font-size: 32rpx;
  font-weight: 400;
  color: #ffffff;
}
</style>
